<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备份管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">备份管理</h2>

    <!-- 功能描述 -->
    <p class="mb-4">这里是备份管理的功能页面。</p>

    <!-- 日期筛选和立即备份 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <label for="startDate" class="form-label me-2">开始日期：</label>
            <input type="date" id="startDate" class="form-control me-3" style="width: auto;">

            <label for="endDate" class="form-label me-2">结束日期：</label>
            <input type="date" id="endDate" class="form-control me-3" style="width: auto;">

            <button class="btn btn-primary" id="filterByDateButton">筛选</button>
        </div>
        <button class="btn btn-success" id="backupButton">立即备份</button>
    </div>

    <!-- 备份日志表格 -->
    <div>
        <h4 class="mb-3">备份日志</h4>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>序号</th>
                <th>备份文件名称</th>
                <th>备份文件大小</th>
                <th>备份时间</th>
                <th>备份状态</th>
                <th>操作人</th>
                <th>备注信息</th>
            </tr>
            </thead>
            <tbody id="backupLogTable">
            <!-- 备份日志数据动态加载 -->
            </tbody>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {
        // 获取当前日期
        const today = new Date();

        // 获取当前月的第一天
        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

        // 格式化日期为 'YYYY-MM-DD'
        const formattedFirstDay = firstDayOfMonth.toISOString().split("T")[0];

        // 设置日期为月初第一天
        $("#startDate").val(formattedFirstDay);

        // 设置结束日期为当天
        const formattedToday = today.toISOString().split("T")[0];
        $("#endDate").val(formattedToday);

        // 页面加载时获取备份日志
        fetchBackupLogs();

        // 点击立即备份按钮触发备份操作
        $("#backupButton").on("click", function () {
            $.ajax({
                url: "/backupLog/backup",
                method: "POST",
                success: function (data) {
                    alert(data); // 提示用户备份结果
                    fetchBackupLogs(); // 刷新备份日志表
                },
                error: function (error) {
                    console.error("备份失败:", error);
                    alert("备份失败，请检查日志或联系管理员！");
                }
            });
        });
    });
    // 点击筛选按钮根据日期范围筛选日志
    $("#filterByDateButton").on("click", function () {
        const startDate = $("#startDate").val();
        const endDate = $("#endDate").val();


        // 校验开始日期和结束日期是否为空
        if (!startDate || !endDate) {
            alert("请填写完整的开始日期和结束日期！");
            return;
        }

        // 校验开始日期不能大于结束日期
        if (new Date(startDate) > new Date(endDate)) {
            alert("开始日期不能大于结束日期！");
            return;
        }


        // 调用筛选接口
        $.ajax({
            url: "/backupLog/list",
            method: "GET",
            data: { startDate: startDate, endDate: endDate },
            success: function (data) {
                renderBackupLogTable(data); // 渲染筛选后的日志数据
            },
            error: function (error) {
                console.error("筛选失败:", error);
                alert("筛选失败，请检查日志或联系管理员！");
            }
        });
    });
    // 获取备份日志数据并渲染表格
    function fetchBackupLogs() {
        $.ajax({
            url: "/backupLog/list", // 备份日志的接口地址
            method: "GET",
            success: function (data) {
                renderBackupLogTable(data);
            },
            error: function (error) {
                console.error("获取备份日志失败:", error);
            }
        });
    }

    // 渲染备份日志表格
    function renderBackupLogTable(data) {
        const tableBody = $("#backupLogTable");
        tableBody.empty(); // 清空表格内容

        data.forEach((log, index) => {
            const row = `
                <tr>
                    <td>${index + 1}</td>
                    <td>${log.backupName}</td>
                    <td>${log.backupSize}</td>
                    <td>${log.backupTime}</td>
                    <td>${log.backupStatus}</td>
                    <td>${log.operator}</td>
                    <td>${log.remarks}</td>
                </tr>`;
            tableBody.append(row);
        });
    }
</script>
</body>
</html>
